<template>
    <el-container>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-change="change">
            <el-tab-pane label="GB300D" name="GB300D">
                <GB300DSta v-if="activeName === 'GB300D'"></GB300DSta>
            </el-tab-pane>
            <el-tab-pane label="GB100D" name="GB100D">
                <GB100DSta v-if="activeName === 'GB100D'"></GB100DSta>
            </el-tab-pane>
            <el-tab-pane label="GB60D" name="GB60D">
                <GB60DSta v-if="activeName === 'GB60D'"></GB60DSta>
            </el-tab-pane>
            <el-tab-pane label="GB30D" name="GB30D">
                <GB30DSta v-if="activeName === 'GB30D'"></GB30DSta>
            </el-tab-pane>
            <el-tab-pane label="GB20D" name="GB20D">
                <GB20DSta v-if="activeName === 'GB20D'"></GB20DSta>
            </el-tab-pane>
            <el-tab-pane label="MOST" name="MOST">
                <GBMost v-if="activeName === 'MOST'"></GBMost>
            </el-tab-pane>

        </el-tabs>
    </el-container>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import GB20DSta from '../components/dailyGB/GB20DSta.vue';
import GB30DSta from '../components/dailyGB/GB30DSta.vue';
import GB60DSta from '../components/dailyGB/GB60DSta.vue';
import GB100DSta from '../components/dailyGB/GB100DSta.vue';
import GB300DSta from '../components/dailyGB/GB300DSta.vue';
import GBMost from '../components/dailyGB/GBMost.vue';

document.title = "DailyGB统计";
const activeNameKey = "DailyGBStaActiveName"
const activeName = ref(sessionStorage.getItem(activeNameKey) || 'GB60D')

const change = (tabName : string) => {
    sessionStorage.setItem(activeNameKey, tabName)
}
</script>